<?php get_instance()->view('common/header');?>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<?php echo $ak;?>"></script>
<style>
.blue{color: blue;}
</style>
<div class="page-container home">
  <?php get_instance()->view('common/sidebar');?>
  <div class="page-content-wrapper">
	  <div class="page-content">
	    <div class="row">
	      <div class="col-md-12">
	        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
	        <h3 class="page-title"> <?php echo $title?> </h3>
	        <ul class="page-breadcrumb breadcrumb">
	          <li><a href="javascript:void(0);"><?php echo $title?></a></li>
	        </ul>
	        <!-- END PAGE TITLE & BREADCRUMB-->
	      </div>
	    </div>
	    <div class="row" style="margin-top:10px;">
	      <div class="col-md-7">
	      		<div class="row">
			      <div class="col-md-12">
					<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
			      </div>
			    </div>
	      		<div style="height:500px;width:100%;margin-top:10px;" id="allmap"></div>
              <script type="text/javascript">
                  var map = new BMap.Map("allmap", {});                        // 创建Map实例
                  map.centerAndZoom(new BMap.Point(105.000, 38.000), 5);     // 初始化地图,设置中心点坐标和地图级别
                  map.enableScrollWheelZoom();                        //启用滚轮放大缩小
                  if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
                      var data = <?php echo $data?>;

                      var points = [];  // 添加海量点数据
                      for (var i = 0; i < data.data.length; i++) {
                          points.push(new BMap.Point(data.data[i][0], data.data[i][1]));
                      }
                      var options = {
                          size: BMAP_POINT_SIZE_SMALL,
                          shape: BMAP_POINT_SHAPE_STAR,
                          color: '#d340c3'
                      };
                      var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
//                      pointCollection.addEventListener('click', function (e) {
//                          alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
//                      });
                      map.addOverlay(pointCollection);  // 添加Overlay
                  } else {
                      show_message({status: 0, message: '请在chrome、safari、IE8+以上浏览器查看'});
                  }
              </script>
	      </div>
	      <div class="col-md-5">
	    	<div class="portlet">
	            <div class="portlet-body">
	              <div class="table-container">
	                <div class="table-actions-wrapper"> <span> </span>
                    </div>
	                <table class="table table-bordered table-hover scoll-title" id="datatable">
	                  <thead>
	                    <tr role="row" class="heading">
						  <th>区/县</th>
	                      <th>人数</th>
	                    </tr>
	                  </thead>
	                  <tbody></tbody>
	                </table>
	              </div>
	            </div>
	          </div>
	      </div>
	    </div>
	  </div>
  </div>
</div>
<script type="text/javascript">
	$(function(){

        datatable_init({
            "sDom": "<'row'<'col-md-5 col-sm-12'<'table-group-actions pull-right'>>r><'table-scrollable't><'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>r>>",
            src: $("#datatable"),
            sAjaxSource: "<?php echo getUrl('statistics/region/getList');?>",
            bSort:false
        });
	});
</script>
</body>
</html>